<template>
  <div class="dashboard-editor-container">
    <div class="dashboard-text">
      <div :class="[mobile ? chart2 : chart1]">
        <div class="panel" @click="change">图表</div>
        <div style="margin:0px 5px 0px 5px;float:left">|</div>
        <div class="panel" @click="change">报表</div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="资产概况" name="1">
          <overview v-if="activeName==='1'&&chartShow" />
        </el-tab-pane>

        <el-tab-pane label="经营状况" name="2">
          <business v-if="activeName==='2'&&chartShow" />
        </el-tab-pane>

        <el-tab-pane label="租金状况" name="5">
          <property v-if="activeName==='5'&&chartShow" />
        </el-tab-pane>

        <el-tab-pane label="产权/财务状况" name="3">
          <financial v-if="activeName==='3'&&chartShow" />
        </el-tab-pane>

        <el-tab-pane label="安全状况" name="4">
          <safe v-if="activeName==='4'&&chartShow" />
        </el-tab-pane>
        <div v-if="!chartShow&&activeName!='5'&&activeName!='1'&&activeName!='2'" style="margin:10px;float:right">
          <span>选择时间段:</span>
          <el-date-picker v-model="time" type="daterange" :clearable="false" @change="dateChange" unlink-panels value-format="timestamp" size="mini" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div v-if="!chartShow&&activeName==='5'&&activeName!='1'&&activeName!='2'&&activeName!='4'" style="margin:10px;float:right">
          <span>选择时间段:</span>
          <el-date-picker v-model="time1" @change="dateChange1" :clearable="false" type="month" placeholder="选择月份" value-format="timestamp" size="mini">
          </el-date-picker>
        </div>
        <iframe class="iframe" v-if="!chartShow" :src="iframeSrc" />
        <!-- <el-tab-pane>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div style="border-width:1px;solid:1px"></div>
  </div>
</template>

<script>
import PieChart from "./components/PieChart";
import business from "./business/index";
import financial from "./financial/index";
import overview from "./panels/overview";
import property from "./property/index";
import safe from "./safe/index";
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};
import { getAcquireData, getRentChartData } from "@/api/charts";
export default {
  name: "Dashboard",
  components: { PieChart, business, financial, overview, property, safe },
  computed: {},
  data() {
    return {
      activeName: "1",
      chartShow: true,
      iframeSrc: "",
      time: [],
      time1: new Date().getTime(),
      mobile: false,
      chart2: "chart2",
      chart1: "chart1",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  props: {
    // activeName: {
    //   type: String,
    //   default: "one"
    // }
  },
  methods: {
    handleClick() {
      this.getchart();
    },
    change(e) {
      if (e.target.textContent === "图表") {
        this.chartShow = true;
      } else {
        this.chartShow = false;
      }
    },
    getchart() {
      console.log("time", this.time);
      if (this.activeName === "5") {
        getRentChartData({ number: this.activeName, date: this.time1 }).then(
          res => {
            this.iframeSrc = res.pdfAdress;
          }
        );
      } else {
        if (this.activeName === "1" || this.activeName === "2") {
          this.time = [];
        }
        getAcquireData({ number: this.activeName, date: this.time }).then(
          res => {
            this.iframeSrc = res.pdfAdress;
          }
        );
      }
    },
    dateChange() {
      this.getchart();
    },
    dateChange1() {
      this.getchart();
    },
    check() {
      let userAgent = navigator.userAgent;
      let ipad = userAgent.match(/(iPad).*OS\s([\d_]+)/),
        isIphone = !ipad && userAgent.match(/(iPhone\sOS)\s([\d_]+)/),
        isAndroid = userAgent.match(/(Android)\s+([\d.]+)/),
        isMobile = isIphone || isAndroid;
      if (isMobile) {
        this.mobile = true;
      }
    }
  },
  created() {
    this.getchart();
    this.check();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.chart1 {
  position: absolute;
  z-index: 100;
  right: 40px;
  top: 40px;
  .panel {
    float: left;
    cursor: pointer;
  }
  .panel:hover {
    color: #0f6cec;
  }
}
.chart2 {
  position: absolute;
  top: 5px;
  z-index: 100;
  .panel {
    float: left;
    cursor: pointer;
  }
  .panel:hover {
    color: #0f6cec;
  }
}
.dashboard-editor-container {
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    // padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.el-card.is-always-shadow {
  box-shadow: 1px 4px 12px 1px #9aaddc61;
}
.el-tabs__header {
  box-shadow: 1px 4px 12px 1px #9aaddc61 !important;
  .el-tabs__item {
    padding-left: 25px !important;
  }
  // .el-tabs__nav {
  //   width: 100% !important;
  // }
}
.title {
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
  border-bottom: 1px solid #dce0e4;
  padding-bottom: 10px;
  span {
    font-size: 16px;
    color: #252525;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }
}
.row_spacing {
  margin-top: 20px;
}
.iframe {
  width: 100%;
  height: calc(100vh - 50px);
}
</style>
